<template>
  <div class="theme-setting">
    <!--    <i :class="'iconfont icon-zhuti'" class="toolBar-icon" @click="openDrawer"></i>-->
    <el-switch
      size="large"
      width="52"
      v-model="globalStore.isDark"
      inline-prompt
      :active-icon="Sunny"
      :inactive-icon="Moon"
      @change="switchDark"
    >
      <!--      <template #active-action>-->
      <!--        <span class="custom-active-action">T</span>-->
      <!--      </template>-->
      <!--      <template #inactive-action>-->
      <!--        <span class="custom-inactive-action">F</span>-->
      <!--      </template>-->
    </el-switch>
  </div>
</template>

<script setup lang="ts">
import { useTheme } from "@/hooks/useTheme";
import { useGlobalStore } from "@/stores/modules/global";
import { Sunny, Moon } from "@element-plus/icons-vue";

const { switchDark } = useTheme();
const globalStore = useGlobalStore();
// const openDrawer = value => {
//   console.log(value);
//   // mittBus.emit("openThemeDrawer");
// };
</script>
<style scoped lang="scss">
:deep(.el-switch__core) {
  border: none;
}
</style>
